<template>
  <div class="head">
    <div class="container">
      <button>登录</button>
      <button>注册</button>
      <span class="el-icon-search search"></span>
      <el-divider direction="vertical"></el-divider>
      <router-link class="cart" to="/cart">
        <span class="el-icon-shopping-cart-2"></span>
        <span class="cartNum">(0)</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "myHead",
  components: {
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100vw;
  height: 50px;
  position: absolute;
  overflow: hidden;
  .container {
    width: 500px;
    text-align: right;
    padding: 20px 50px 0 0;
    float: right;
    height: 100%;
  }
  .cart {
    cursor: pointer;

    .cartNum {
      font-size: 0.5rem;
      margin-left: 5px;
    }
  }
  button {
    background: none;
    border: 1px solid #000;
    width: auto;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.7rem;
    text-align: center;
    letter-spacing: 0.3rem;
    margin-right: 12px;
    cursor: pointer;
    transition: 0.4s;
  }
  button:hover {
    opacity: 0.8;
  }
}
</style>